<template>
  <div class="stepschild1_container">
    <div class="from_box">
      <!-- 写 step2 的结构 -->
      <el-form style="width: 600px" label-width="120px" :model="form" ref="ruleForm">
        <!-- 输入框 -->
        <el-form-item label="赠送积分：" prop="giftPoint">
          <el-input v-model="form.giftPoint" />
        </el-form-item>
        <el-form-item label="赠送成长值：" prop="giftGrowth">
          <el-input v-model="form.giftGrowth" />
        </el-form-item>
        <el-form-item label="积分购买限制：" prop="usePointLimit">
          <el-input v-model="form.usePointLimit" />
        </el-form-item>
        <el-form-item label="预告商品：" prop="previewStatus">
          <el-switch />
          <!-- <el-switch v-model="form.previewStatus" /> -->
        </el-form-item>
        <el-form-item label="商品上架：" prop="publishStatus">
          <!-- <el-switch v-model="form.publishStatus" /> -->
          <el-switch />
        </el-form-item>
        <el-form-item label="商品推荐：" prop="recommandStatus">
          <div style="margin-right: 30px;">
            新品
            <!-- <el-switch style="margin-left: 10px;" v-model="form.newStatus" /> -->
            <el-switch style="margin-left: 10px;" />
          </div>
          推荐
          <!-- <el-switch style="margin-left: 10px;" v-model="form.lowStock" /> -->
          <el-switch style="margin-left: 10px;" />
        </el-form-item>
        <el-form-item label="服务保证：" prop="serviceIds">
          <div>
            <el-checkbox v-model="checked1" label="无忧退货" size="large" />
            <el-checkbox v-model="checked2" label="快速退款" size="large" />
            <el-checkbox v-model="checked2" label="免费包邮" size="large" />
          </div>
        </el-form-item>
        <el-form-item label="详情页标题：" prop="detailTitle">
          <el-input v-model="form.detailTitle" />
        </el-form-item>
        <el-form-item label="详情页描述：" prop="description">
          <el-input v-model="form.detailDesc" />
        </el-form-item>
        <el-form-item label="商品关键字：" prop="keywords">
          <el-input v-model="form.keywords" />
        </el-form-item>
        <!-- 文本域 -->
        <el-form-item label="商品备注：" prop="note">
          <el-input autocomplete="off" type="textarea" v-model="form.note" />
        </el-form-item>
        <el-form-item label="选择优惠方式" prop="promotionType">
          <el-col>
            <el-radio-group v-model="form.promotionType" size="large">
              <el-radio-button label="no" :active="form.promotionType === 0">无优惠</el-radio-button>
              <el-radio-button label="cheap" :active="form.promotionType === 1">特惠促销</el-radio-button>
              <el-radio-button label="vip" :active="form.promotionType === 2">会员价格</el-radio-button>
              <el-radio-button label="levelprice" :active="form.promotionType === 3">阶梯价格</el-radio-button>
              <el-radio-button label="fullreduceprice" :active="form.promotionType === 4">阶梯价格</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <!-- 特惠促销显示 -->
        <el-form-item v-show="form.promotionType === 0">
          <!-- 开始时间 -->
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>开始时间：</el-row>
            <el-row>
              <el-date-picker v-model="date" type="date" placeholder="开始时间" style="width: 100%" />
            </el-row>
          </el-col>
          <!-- 结束时间 -->
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>开始时间：</el-row>
            <el-row>
              <el-date-picker v-model="date" type="date" placeholder="开始时间" style="width: 100%" />
            </el-row>
          </el-col>
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>促销价格：</el-row>
            <el-input style="width: 214px" v-model="price" placeholder="请输入促销价格" />
          </el-col>
        </el-form-item>
        <!-- 会员价格显示 -->
        <el-form-item v-show="form.promotionType === 1">
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>黄金会员：</el-row>
            <el-input style="width: 214px" v-model="vip" />
          </el-col>
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>白金会员：</el-row>
            <el-input style="width: 214px" v-model="vip1" />
          </el-col>
          <el-col style="margin-bottom: 10px;display: flex;justify-content: center;">
            <el-row>钻石会员：</el-row>
            <el-input style="width: 214px" v-model="vip2" />
          </el-col>
        </el-form-item>
        <!-- 阶梯价格显示 -->
        <el-form-item v-show="form.promotionType === 2">
          <el-table :data="tableData" ref="tableRef" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="number" label="数量">
              <template #default="{ row }">
                <el-button type="primary" link>分配角色</el-button>
                <el-button type="primary" link>编辑</el-button>
              </template>
            </el-table-column>

            <el-table-column prop="discount" label="打折">
              <template #default="{ row }">
                <el-button type="primary" link>分配角色</el-button>
                <el-button type="primary" link>编辑</el-button>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="primary" link>分配角色</el-button>
                <el-button type="primary" link>编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

// const forminit: AddProduceForm = {
const forminit = {
  giftPoint: 0,// 赠送积分
  giftGrowth: 0,// 赠送成长值
  usePointLimit: 0,// 积分购买限制
  previewStatus: 0,// 预告商品
  publishStatus: 0,// 商品上架
  recommandStatus: 0,// 商品推荐
  newStatus: 0,
  serviceIds: '',// 服务保证
  detailTitle: '',// 详情页标题
  detailDesc: '',// 详情页描述
  keywords: '',// 商品关键字
  note: '',// 商品备注
  promotionType: 0,// 选择优惠方式
  lowStock: 0,
  prefrenceAreaProductRelationList: [],
  productAttributeCategoryId: null,
  productAttributeValueList: [],
  promotionEndTime: "",
  promotionPrice: null,
  promotionStartTime: "",
  subjectProductRelationList: []
}

// 把form表单的数据做成响应式
const form = reactive({ ...forminit })

const date = ref('')
const price = ref('')
const vip = ref('')
const vip1 = ref('')
const vip2 = ref('')

const checked1 = ref(true)
const checked2 = ref(false)

const tableDatainit = [{
  number: 0,
  discount: 0
}]

const tableData = reactive([{ ...tableDatainit }])

// 先获取到ref
const ruleForm = ref<any>(null)

// 将子组件表单数据暴露
defineExpose({
  form,
  ruleForm
})

</script>

<style lang="less" scoped>
.stepschild1_container {
  display: flex;
  flex-direction: column;

  .from_box {
    margin-top: 60px;
  }
}
</style>